<template>
<div>
  <el-col :span="12" :offset="6">
        <div class="grid-content bg-purple" style="margin-top: 50px;">
          <el-card style="width: 400px; margin: auto;  text-align: center;">
            <h3>用户注册</h3>
            <el-divider></el-divider>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="用户名:" prop="username">
                <el-input  v-model="ruleForm.username" placeholder="请输入用户名" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="密码:" prop="password">
                <el-input type="password" v-model="ruleForm.password" show-password placeholder="请输入密码" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="确认密码:" prop="secondPassword">
                <el-input type="password" v-model="ruleForm.secondPassword" show-password placeholder="请确认密码" max="16" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button style="width: 170px;" type="primary" @click="submitForm('ruleForm')">注册</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </div>
  </el-col>
</div>
</template>
<script>
export default {
  name: "register",
  data() {
    return {
      ruleForm: {
        username: '',
        password: '',
        secondPassword: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        secondPassword: [
          { required: true, message: '请确认密码', trigger: 'blur' }
        ],

      }
    };
  },
  methods: {
 //    submitForm(formName) {
	// 	this.$refs[formName].validate((valid) => {
	// 	  if (valid) {
	// 		const _this = this
	// 		this.$axios.post('/register', this.ruleForm).then(res => {
				
	// 			  if(res.code === 200){
	// 			    this.$message({
	// 			      message: '注册成功',
	// 			      type : 'success'
	// 			    })
	// 			    this.$router.push({path: "/login"})
				
	// 		  // console.log(res.data)
	// 		  // const jwt = res.headers['authorization']
	// 		  // const userInfo = res.data.data
	// 		  // // 把数据共享出去
	// 		  // _this.$store.commit("SET_TOKEN", jwt)
	// 		  // _this.$store.commit("SET_USERINFO", userInfo)
	// 		  // // 获取
	// 		  // console.log(_this.$store.getters.getUser)
	// 		  // _this.$router.push("/blogs")
	// 		// })
	// 	  } else {
	// 		console.log('error submit!!');
	// 		return false;
	// 	  }
	// 	})
	// 	}
 //      // this.axios.post('/user/register',{
 //      //   username : this.ruleForm.username,
 //      //   password : this.ruleForm.password,
 //      //   secondPassword : this.ruleForm.secondPassword

 //      // }).then(resp => {
 //      //   if(resp.code === 200){
 //      //     this.$message({
 //      //       message: '注册成功',
 //      //       type : 'success'
 //      //     })
 //      //     this.$router.push({path: "/login"})
 //      //   }else{
 //      //     this.$message({
 //      //       message: '注册失败',
 //      //       type : 'error'
 //      //     })
 //      //   }
 //      // })
 //    },
	

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },


  }
}
</script>


<style>

</style>
